<template>
    <div >
      
        <div class="logo">
            <img class="bb-img" src="../assets/banner.png" />
        </div>
       <div class="sereach">
       <mt-search
            class="mm"
        
  cancel-text="取消"
  placeholder="搜索">
       </mt-search>
        </div> 
        <div class="container">
            <h1>创建放心消费环境，树立诚信守法意识。</h1>
            <h2>热销推荐</h2>
            <h3>用户喜爱的热销精品</h3>
        </div>
        <!-- 首页轮播图 -->
        <div class="swiper">
          <mt-swipe  :auto="3000" class="swiper-a" >
            <mt-swipe-item  class="swiper-b">
                <img src="../assets/he1.jpg" />
                <h1>阿萨十多万</h1>
                <h2>232元</h2>
             </mt-swipe-item>
            <mt-swipe-item class="swiper-b"><img src="../assets/he2.jpg" />
            <h1>ddw</h1>
                <h2>232元</h2></mt-swipe-item>
            <mt-swipe-item class="swiper-b"><img src="../assets/he3.jpg" />
            <h1>asd</h1>
                <h2>272元</h2></mt-swipe-item>
           
          </mt-swipe>
        </div>
        <div class="jingxuan">精选话题</div>
        <!-- 下拉图片 -->
        <div class="foote" 
         v-for="item of list"        
            :key="item.id"
        >
          <div  >
              <img class="foote-log" src="../assets/log.jpg" />
               <img class="foote-lb" src="..\assets\2017022800_time.png"/>
              <span class="foote-lc">2018-8-10</span>
              <img class="foote-lb foote-lk" src="..\assets\2017022800_place.png"/>
               <img class="foote-lb" src="..\assets\2017022800_eye.png"/>
                <span class="foote-ld">3284</span>
                <img class="foote-lb" src="..\assets\2017022800_thumb.png"/>
                <span class="foote-le">25</span>
                 <img class="foote-lb" src="..\assets\2017022800_chat.png"/>
                 <span class="foote-lf">158</span>
          </div>
          <div class="hetc" :value="item.id">
              <img @click="$router.push('/menu')" class="hetc-bl" :src="item.img" />
            <h2>{{item.title}}</h2>
           </div>
        </div>
        
        
    </div>
</template>

<script>
import { Search ,Swipe, SwipeItem} from 'mint-ui';
    const list=[{
        id:Math.random(),
        img:require('../assets/tu1.jpg'),
        title:'千万别等到颈椎病，才知道换床垫'
    },{
        id:Math.random(),
        img:require('../assets/tu3.jpg'),
        title:'啊实打实大速度来家里啊飒飒大胜利大街'
    },{
        id:Math.random(),
        img:require('../assets/tu4.jpg'),
        title:'老夫人仿佛童话与他'
    },{
        id:Math.random(),
        img:require('../assets/tu4.jpg'),
        title:'哒哒哒哒哒哒的'
    },{
        id:Math.random(),
        img:require('../assets/tu4.jpg'),
        title:'阿萨德哇哦爱上二维'
    },{
        id:Math.random(),
        img:require('../assets/tu3.jpg'),
        title:'收到过鱼人'
    },{
        id:Math.random(),
        img:require('../assets/tu4.jpg'),
        title:'为偶尔vtyi4'
    }]
  export default {
      data(){
          return {
              list
          }
      },
      
      components:{
       'mt-search': Search,
       'mt-swipe':Swipe,
       'mt-swipe-item':SwipeItem
    }
}
</script>

<style lang="scss" scoped>
.logo{
    height: 61px;
    text-align: center;
    background: #e0e0e0;
}
    .bb-img{
    height:100%;
    width: 280px;
    margin-left:5px;
    vertical-align: middle;
    }
    .sereach{
        width: 100%;
        height:95px;
        background:#e0e0e0;
    
    }
    .sereach .mm{
       padding-top:15px;
      
       
    }
   .container{
       width: 100%;
       height: 106px;
       text-align: center;
       h1{
           font-weight: bold;
           margin-top:12px;
           font-size: 16px;
           margin-bottom:12px;
           font-family: 微软雅黑;
       }
       h2{
           font-weight: bold;
            margin-top:12px;
           font-size: 16px;
           margin-bottom:12px;
           font-family: 微软雅黑;
       }
   }
    .swiper{
       height: 163px;
       width: 100%;
      position: relative;
       display: flex;
       flex-direction: row;
       overflow: hidden;
            &-a{
                height: 163px;
                width: 100%;
                position: relative;
                overflow: hidden;
                .mint-swipe-items-wrap{
                    height: 163px;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
            }
            &-b{
               height: 163px;
               width: 100%;
               position: absolute;
            }
    }
    


    .jingxuan{
        text-align: center;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom:18px;
       font-weight: bold;
        font-size: 16px;
    }
    .foote{
        height: 100%;
        border-bottom: 1px solid black;
        &-log{
            margin-left: 10px;
            height: 40px;
            width: 40px;
        }
        &-lb{
            height: 15px;
            width: 13px;
        }
        &-lc{
            margin-right: 15px;
        }
         &-ld{
            margin-right: 12px;
        }
          &-le{
            margin-right: 12px;
        }
         &-lf{
            margin-right: 14px;
        }
        &-lk{
            margin-right:40px;
        }
     
    }
.hetc{
    &-bl{
        height:216px;
        width: 414px;
        margin-bottom: 10px;
    }
    h2{
        font-size: 17px;
        font-weight: bold;
       margin-bottom: 15px;
       
    }
}
</style>
